<template>
    <div class="deliver-map">
      <div class="map-view" ref="map"></div>
    </div>
</template>
<script>
var path = [
          [106.65, 26.68],
          [106.75, 26.63],
          [106.72, 26.57]
      ]
 export default {
    name: 'DeleverMap',
    props: {
      center: {
        type: Array,
        default: () => [106.62298, 26.67865]
      }
    },
    data() {
        return {
            mapInstance: null, // 地图实例
            targetCircle: null, // 圆
            targetMap: null,
            circles: {}, // 所有可编辑的圆
            circleRadius: 1000,
            circleOption: {
                fillColor: 'rgb(0,0,0)', // 圆形填充颜色
                fillOpacity: 0.3,
                strokeColor: '#f60', // 描边颜色
                strokeWeight: 1, // 描边宽度
                zIndex: 10
            },
            polygonOption: {
            path: path,
            draggable: true,
            ffillColor: 'rgb(0,0,0)', // 圆形填充颜色
            fillOpacity: 0.3,
            borderWeight: 1, // 线条宽度，默认为 1
            strokeColor: '#f60', // 线条颜色
            }
        }
    },
    computed: {
      mapOption () {
        return {
          zoom: 12, // 设置地图显示的缩放级别
          center: this.center, // 设置地图中心点坐标
          viewMode: '2D', // 设置地图模式
          lang: 'zh_cn', // 设置地图语言类型
          zIndex: 20
        }
      }
    },
    mounted () {
      this.createMap()
    },
     methods: {
      createMap () {
        const mapDom = this.$refs['map']
        this.mapInstance = new window.AMap.Map(mapDom, this.mapOption)
      },
      // 组件方法，父组件调用：在地图上画圆
      createMapCircle (option) {
        let mapCenter = this.center
        const mapCenterAddress = ''
        const deliveryPrice = null
        try {
          const _c = this.mapInstance.Hl.center.Ce.center
          mapCenter = [_c.lng, _c.lat]
        } catch (err) {}
        const {
          center = mapCenter,
          radius = this.circleRadius
        } = option || {}
        const circle = new window.AMap.Circle({
          ...this.circleOption, // 默认圆样式
          center: new window.AMap.LngLat(...center), // 圆心位置
          radius: radius // 圆半径
        })
        circle.setMap(this.mapInstance)
        this.createMapEditorCircle(this.mapInstance, circle).then(resCircle => {
          resCircle.open()
        })
        circle.Ce.name = mapCenterAddress
        circle.Ce.price = deliveryPrice
        console.log(circle)
        return circle
      },
      createMapEditorCircle (mapIns, tarCircle) {
        console.log('tarCircle', tarCircle)
        this.targetCircle = tarCircle
        return new Promise((resolve) => {
          const circleEditor = new window.AMap.CircleEditor(mapIns, tarCircle)
          resolve(circleEditor)
        })
      },
      // 删除圆圈
      deleteCircle(index) {
        let tar = this.targetCircle
        this.mapInstance.remove(tar)
      },
      // 画多边形
      createMapPolygon (option) {
        let mapCenter = this.center
        const mapCenterAddress = ''
        const deliveryPrice = null
        try {
          const _c = this.mapInstance.Hl.center.Ce.center
          mapCenter = [_c.lng, _c.lat]
        } catch (err) {}
        const {
          center = mapCenter,
          radius = this.circleRadius
        } = option || {}
        const polygon = new window.AMap.Polygon({
          ...this.polygonOption, // 默认圆样式
          center: new window.AMap.LngLat(...center)
        })
        polygon.setMap(this.mapInstance)
        this.createMapPolyEditor(this.mapInstance, polygon).then(resPolygon => {
          resPolygon.open()
        })
        return polygon
      },
      createMapPolyEditor (mapIns, tarPolygon) {
        return new Promise((resolve) => {
          const polygonEditor = new window.AMap.PolyEditor(mapIns, tarPolygon)
          resolve(polygonEditor)
        })
      },
      // 

      destroyMap () {
        this.mapInstance.destroy()
      }
    },
    beforeDestroy () {
      this.destroyMap()
    }
 }
</script>
<style scoped lang="less">
    .deliver-map {
        flex: 1 1;
        position: relative;
    .map-view {
      width: 100%;
      height: 100%;
    }
  }
</style>